<template>
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <!--        查询按钮-->
        <el-button style="float: right" @click="handleSearchList()" type="primary" size="small">查询结果</el-button>
        <!--        重置按钮-->
        <el-button style="float: right;margin-right: 15px" @click="handleResetSearch()" size="small">重置</el-button>
      </div>


      <div style="margin-top: 15px">
        <el-form :inline="true" :model="productVO" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input style="width: 203px" v-model="productVO.name" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品货号：">
            <el-input style="width: 203px" v-model="productVO.productSn" placeholder="商品货号"></el-input>
          </el-form-item>
          <el-form-item label="商品分类">
            <dev class="block">
              <sapn class="demonstration"></sapn>
              <el-cascader
                placeholder="请选择"
                v-model="productVO.productCategoryId"
                :options="category"
                :props=Cascader
                @change="handleCascaderChange">
              </el-cascader>
            </dev>
          </el-form-item>
          <el-form-item label="商品品牌">
            <el-select v-model="productVO.brandId" placeholder="请选择品牌">
              <el-option v-for="i in brandVo"
                         :key="i.id"
                         :label="i.name"
                         :value="i.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上架状态：">
            <el-select v-model="productVO.publishStatus" placeholder="全部" clearable>
              <el-option
                v-for="item in publishStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审核状态：">
            <el-select v-model="productVO.verifyStatus" placeholder="全部" clearable>
              <el-option
                v-for="item in verifyStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button
        style="float: right"
        class="btn-add"
        @click="handleAddProduct()"
        size="mini">
        添加
      </el-button>
    </el-card>


    <div class="table-container">
      <el-table ref="productTable"
                :data="productList"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope"><img style="height: 80px" :src="scope.row.imgUrl2"></template>
        </el-table-column>
        <el-table-column label="商品/名称" align="center">
          <template slot-scope="scope">
            <p>名称：{{ scope.row.name }}</p>
            <p>品牌：{{ scope.row.brandName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="货号" width="120" align="center">
          <template slot-scope="scope">
            <p>货号：{{ scope.row.productSn }}</p>
          </template>
        </el-table-column>
        <el-table-column label="标签" width="140" align="center">
          <template slot-scope="scope">
            <p>上架：
              <el-switch
                @change="handlePublishStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.publishStatus">
              </el-switch>
            </p>
            <p>新品：
              <el-switch
                @change="handleNewStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.newStatus">
              </el-switch>
            </p>
            <p>推荐：
              <el-switch
                @change="handleRecommendStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.recommandStatus">
              </el-switch>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.sort }}</template>
        </el-table-column>
        <el-table-column label="销量" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.sale }}</template>
        </el-table-column>
        <el-table-column label="审核状态" width="100" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.verifyStatus | verifyStatusFilter }}</p>
            <p>
              <el-button
                type="text"
                @click="handleShowVerifyDetail(scope.$index, scope.row)">审核详情
              </el-button>
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                @click="handleShowProduct(scope.$index, scope.row)">查看
              </el-button>
              <el-button
                size="mini"
                @click="handleUpdateProduct( scope.row)">编辑
              </el-button>
            </p>
            <p>
              <el-button
                size="mini"
                @click="handleShowLog(scope.$index, scope.row)">日志
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除
              </el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-select>
      <el-option value="批量操作">批量操作</el-option>
      <el-option value="删除">删除</el-option>
    </el-select>
    <el-button style="background-color: #00afff">确定</el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="float: right; padding: 3px 0" type="text"
      :current-page="pageNum"
      :page-sizes="[5, 10, 15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>







  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {findProductList, recursion,delect} from "@/api/product/product";
import {Cascader} from "element-ui";
import { findALlBrand} from "@/api/product/brand";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        productVO:{},
        productList:{},
        pageNum:1,
        pageSize:3,
        total:'',
        category:[],
        Cascader:{expandTrigger:'hover',value:'id',label:'name',children:'chilren'},
        brandVo:{},
        publishStatusOptions: [{
          value: 1,
          label: '上架'
        }, {
          value: 0,
          label: '下架'
        }],
        verifyStatusOptions: [{
          value: 1,
          label: '审核通过'
        }, {
          value: 0,
          label: '未审核'
        }],
      };
    },
    //计算属性 类似于data概念",
    computed: {
      Cascader() {
        return Cascader
      }
    },
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      handleCascaderChange(value) {
        // 将多级联动数据数组的最后一个值赋给 v-model
        this.productVO.productCategoryId = value[value.length - 1];
      },
      //商品下拉框
      findBrandListDong(){
        findALlBrand().then(
          res=>{
            this.brandVo=res.data
          }
        )
      },
      //级联
      recursion(){
        recursion(0).then(
          res=>{
            this.category=res.data
          }
        )
      },
      //添加商品跳页面
      handleAddProduct(){
        this.$router.push('/product/addproduct')
      },
      // 重置
      handleResetSearch(){
          this.productVO=[]
      },
      // 条件查询
      handleSearchList(){
        this.findProductList()
      },
      // 列表查询
      findProductList(){
        findProductList(this.pageNum,this.pageSize,this.productVO).then(
          res=>{
            this.productList=res.data.rows
            console.log(this.productList)
            this.total=res.data.total
          }
        )
      },
      //分页
      handleSizeChange(val) {
        this.pageSize=val
        this.findProductList()
      },
      //分页
      handleCurrentChange(val) {
        this.pageNum=val
        this.findProductList()
      },
      //全选，反选
      handleSelectionChange(){

      },
      //审核详情
      handleShowVerifyDetail(){

      },
      //查看
      handleShowProduct(){

      },
      //编辑
      handleUpdateProduct(val){
        this.$router.push({path:'/product/UpdateProduct',query:{val:val}})
      },
      //日志
      handleShowLog(){

      },
      //删除
      handleDelete(val){
        delect(val).then(
          res=>{
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }
        )
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.findProductList()
      this.recursion()
      this.findBrandListDong()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
